@import url('../../../less/base.less');
.ykb-city-picker{
  .citypicker-container{
    width: 100%;
    height: 100%;
    background: #F5F5F5;
    .header-box{
      position: fixed;
      width: 100%;
      top: 0;
      height: 100px;
      .header{
        width: 100%;
        height: 46px;
        display: flex;
        display: -webkit-flex;
        background-color: @theme-color;
        color:#fff;
        line-height: 46px;
        text-align: center;
        .back-icon{
          width: 30%;
          text-align: left;
          padding-left: 10px;
          img{
            vertical-align: middle;
          }
          span{
            font-size: 14px;
          }
        }
        span.title{
          width: 70%;
          text-align: left;
          padding-left: 14%;
        }
      }
      .search-bar{
        .ykb-input-search{
          padding: 2%;
        }
      }
    }
    .body{
      overflow: auto;
      over-flow: auto;     /* winphone8和android4+ */
      -webkit-overflow-scrolling: touch;    /* ios5+ */
      z-index:1;
      margin-top: 96px;
      height: 100%;
      section.dd,section.recent-history,section.current-city{
        background-color:#F5F5F5;
        p.title-box, p.title-box-unactive{
          margin: 0;
          text-align: left;
          height: 30px;
          line-height: 30px;
          span.title{
            color: #999999;
            font-size: 13px;
          }
        }
        .city-container{
          padding: 0;
          margin: 0;
          li{
            width: 22%;
            height:32px;
            line-height: 30px;
            text-align: center;
            margin: 2px 0;
            border:1px solid #efefef;
            color: #000;
            background: #fff;
            font-size: 14px;
            margin-left: 2%;
            border-radius: 4px;
          }
          li.active{
            color: @theme-color;
          }
        }
        .city-container.flex{
          display: flex;
          justify-content: flex-start;
          flex-flow: row wrap;
          display: -webkit-flex;
          -webkit-justify-content: flex-start;
          -webkit-flex-flow: row wrap;
        }
        .city-container.float{
          overflow: hidden;
          clear: both;
          li{
            float: left;
          }
        }
      }
      section.current-city{
        p.title-box{
          background: #fff;
          height: 35px;
          line-height: 35px;
          width: 96%;
          margin: 0 auto;
          border-radius: 5px;
          img{
            vertical-align: middle;
            margin-left: 8px;
          }
          span{
            color: @theme-color !important;
            margin-left: 1px;
          }
        }
      }
      section.alphabeta{
        background: #F5F5F5;
        p.title-box{
          background: #F5F5F5;
          color: #999999;
          font-size: 13px;
          height: 35px;
          line-height: 35px;
          margin: 0 auto;
          text-align: left;
        }
        ul{
          padding: 0;
          margin: 0;
          li{
            width:17.5%;
            height:32px;
            line-height: 30px;
            text-align: center;
            margin: 2px 3px;
            border: 1px solid @cell-border-color;
            color: #000;
            font-size: 14px;
            background: #fff;
            border-radius: 4px;
          }
          li.active{
            background:@theme-color;
            color:#fff;
          }
        }
        ul.flex{
          flex-flow: row wrap;
          display: flex;
          justify-content: flex-start;
          display: -webkit-flex;
          -webkit-justify-content: flex-start;
          -webkit-flex-flow: row wrap;
          li{
          }
        }
        ul.float{
          overflow: hidden;
          clear: both;
          li{
            float: left;
          }
        }
      }
    }
  }
  .mint-popup-right{
    width: 100%;
    height: 100%;
  }
}